<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SVG Line Animation with Anime.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
</head>

<body>
    <svg width="500" height="500" viewBox="0 0 500 500">
        <line id="animatedLine1" x1="0" y1="0" x2="0" y2="0" stroke="black" stroke-width="3" stroke-opacity="0.5" />
        <line id="animatedLine2" x1="0" y1="0" x2="0" y2="0" stroke="red" stroke-width="3" stroke-opacity="0.5" />
        <line id="animatedLine3" x1="0" y1="0" x2="0" y2="0" stroke="blue" stroke-width="3" stroke-opacity="0.5" />
    </svg>

    <script>
        anime({
            targets: '#animatedLine1',
            x2: [0, 100],
            y2: [0, 100],
            duration: 2000,
            easing: 'easeInOutQuad',

        });
        setTimeout(function () {
            document.querySelector('#animatedLine2').setAttribute('x1', '100')
            document.querySelector('#animatedLine2').setAttribute('y1', '100')
            anime({
                targets: '#animatedLine2',
                x2: [100, 120],
                y2: [100, 150],
                duration: 2000,
                easing: 'easeInOutQuad',
            });
        }, 2000);
        setTimeout(function () {
            document.querySelector('#animatedLine3').setAttribute('x1', '120')
            document.querySelector('#animatedLine3').setAttribute('y1', '150')
            anime({
                targets: '#animatedLine3',
                x2: [120, 180],
                y2: [150, 130],
                duration: 2000,
                easing: 'easeInOutQuad',
            });
        }, 4000);
    </script>
</body>

</html>